<!DOCTYPE html>
<html>
<head>
    <title>Electric Potential vs. Position Graph</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Drawing parameters ---
        const originX = 350;
        const originY = 250;
        const scaleX = 35;
        const scaleY = 15;

        // --- Coordinate transformation functions ---
        function tx(x) {
            return originX + x * scaleX;
        }

        function ty(v) {
            return originY - v * scaleY;
        }

        // --- Main drawing function ---
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            drawAxes();
            drawGraph();
            drawLabels();
            drawDashedLines();
            drawBottomText();
        }

        // --- Function to draw axes, ticks, and labels ---
        function drawAxes() {
            ctx.beginPath();
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;

            // X-axis
            ctx.moveTo(tx(-9), ty(0));
            ctx.lineTo(tx(9), ty(0));
            // Arrowhead for x-axis
            ctx.moveTo(tx(9), ty(0));
            ctx.lineTo(tx(8.7), ty(0.5));
            ctx.moveTo(tx(9), ty(0));
            ctx.lineTo(tx(8.7), ty(-0.5));
            
            // Y-axis
            ctx.moveTo(tx(0), ty(-14));
            ctx.lineTo(tx(0), ty(14));
            // Arrowhead for y-axis
            ctx.moveTo(tx(0), ty(14));
            ctx.lineTo(tx(-0.2) * 0.99, ty(13.5)); // A bit of trial and error to make it look right
            ctx.moveTo(tx(0), ty(14));
            ctx.lineTo(tx(0.2) * 1.01, ty(13.5));


            // Ticks on X-axis
            for (let i = -8; i <= 8; i++) {
                if (i === 0) continue;
                ctx.moveTo(tx(i), ty(0));
                ctx.lineTo(tx(i), ty(0) + 5);
            }
            
            // Ticks on Y-axis
            const yTicks = [-12, -6, 6, 12];
            for (const v of yTicks) {
                ctx.moveTo(tx(0), ty(v));
                ctx.lineTo(tx(0) - 5, ty(v));
            }
            ctx.stroke();

            // Axis labels
            ctx.fillStyle = '#000';
            ctx.textAlign = 'left';
            ctx.fillText('V/V', tx(0) + 10, ty(12.5));
            ctx.textAlign = 'center';
            ctx.fillText('x/m', tx(8.5), ty(0) + 20);

            // Axis number labels
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            ctx.fillText('12', tx(0) - 10, ty(12));
            ctx.fillText('6', tx(0) - 10, ty(6));
            ctx.fillText('-6', tx(0) - 10, ty(-6));
            ctx.fillText('-12', tx(0) - 10, ty(-12));

            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText('-5', tx(-5), ty(0) + 8);
            ctx.fillText('5', tx(5), ty(0) + 8);
            
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'right';
            ctx.fillText('O', tx(0)-5, ty(0)+15);
        }

        // --- Function to draw the V-x graph ---
        function drawGraph() {
            ctx.beginPath();
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 2.5;

            const points = [
                {x: -7, v: 0},   // a
                {x: -5, v: 12},  // b
                {x: -2, v: 12},  // c
                {x: 2, v: 0},    // e
                {x: 3, v: -6},   // f
                {x: 5, v: -6},   // g
                {x: 7, v: 0}     // h
            ];

            ctx.moveTo(tx(points[0].x), ty(points[0].v));
            for (let i = 1; i < points.length; i++) {
                ctx.lineTo(tx(points[i].x), ty(points[i].v));
            }
            
            ctx.stroke();
        }
        
        // --- Function to draw dashed lines ---
        function drawDashedLines() {
            ctx.beginPath();
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            ctx.setLineDash([4, 4]);

            // from b to x-axis
            ctx.moveTo(tx(-5), ty(12));
            ctx.lineTo(tx(-5), ty(0));

            // from c to x-axis
            ctx.moveTo(tx(-2), ty(12));
            ctx.lineTo(tx(-2), ty(0));

            // from f to x-axis
            ctx.moveTo(tx(3), ty(-6));
            ctx.lineTo(tx(3), ty(0));
            
            // from g to x-axis
            ctx.moveTo(tx(5), ty(-6));
            ctx.lineTo(tx(5), ty(0));

            ctx.stroke();
            ctx.setLineDash([]); // Reset to solid line
        }

        // --- Function to draw point labels ---
        function drawLabels() {
            ctx.fillStyle = '#000';
            ctx.font = 'italic 18px Times New Roman';
            
            // Custom positioning for each label
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            ctx.fillText('a', tx(-7.5), ty(0.5));
            ctx.fillText('b', tx(-5.5), ty(12.5));
            ctx.fillText('c', tx(-2), ty(13));
            ctx.fillText('d', tx(0.3), ty(6.8));
            ctx.fillText('e', tx(2), ty(1.5));
            ctx.fillText('f', tx(3.1), ty(-7));
            ctx.fillText('g', tx(5), ty(-7.2));
            ctx.fillText('h', tx(7.2), ty(1));
        }
        
        // --- Function to draw the text at the bottom ---
        function drawBottomText() {
            ctx.fillStyle = '#000';
            ctx.font = '18px KaiTi'; // A common font for Chinese characters
            ctx.textAlign = 'center';
            ctx.fillText('习题 7-33 图', canvas.width / 2, canvas.height - 25);
        }

        // --- Run the drawing function ---
        draw();
    </script>
</body>
</html>